<template>
	<div>
		<Row align="middle" justify="center">
			<Col>
			<h1 style="text-align: center; ">订单列表</h1>
	
			</Col>
		</Row>
		<Row :class="'m-0'">
		  <Col span="9"offset="1">
		    <div class="search">
		      <Input
		        search
		        placeholder="按照名字模糊检索"
		        v-model="searchKey"
		        :class="'m-2'"
		      />
		    </div>
		  </Col>
		  <Col span="2" offset="1">
		    <Button
		      class="m-2 w-75"
		      type="primary"
		      shape="circle"
		      @click="search()"
		      icon="ios-search"
		      >查询</Button
		    >
		  </Col>
		</Row>
		<!-- 条件检索 -->
		<Row>
			<Col span="4" offset="1">
				 <Input :class="'w-75 m-2'" v-model="orderNumber" placeholder="编号" />
			</Col>
			<Col span="4" offset="1">
              <Select
				v-model="statu"
				placeholder="状态"
				filterable
				clearable
			  >
				<Option v-for="item in statuList" :value="item.value"
						>{{ item.label }}
				</Option>
			  </Select>
			</Col>
			<Col span="4" offset="1">
               <Select
				v-model="orderTypeId"
				placeholder="发布类型"
				filterable
				clearable
			  >
				<Option v-for="item in typeList" :value="item.value"
						>{{ item.label }}
				</Option>
			  </Select>
			</Col>
			<Col span="4" offset="1">
				<Date-picker
				  :class="'w-100 m-2'"
				  type="datetime"
				  @on-change="changeDate"

				  placeholder="交易时间"
				  transfer
				>
				</Date-picker>
			</Col>
		</Row>
		
		
			<Layout :class="'bg-white'">
			  <Table
			    disabled-hover
			    border
			    :class="'m-1'"
			    :columns="tableInfo.columnInfo"
			    :data="tableInfo.data"
			  >
			  <template slot-scope="{ row, index }" slot="statu">
			    <Row>
			      <Col>
			        <span v-if="row.statu == 0">未支付</span>
			        <span v-if="row.statu == 1 ">待支付</span>	
			        <span v-if="row.statu == 2 ">已支付</span>
					<span v-if="row.statu == 3 ">取消支付</span>
			      </Col>
			    </Row>
			  </template>
			  </Table>
			  <Page
			    class="pages"
			    :class="'m-2 text-right'"
			    :page-size="tableInfo.size"
			    @on-change="pageSearch"
			    :total="tableInfo.total"
			    :current="tableInfo.page"
			    
			    
			  />
			</Layout>
		
		<!-- <div class="width1190">
			<div class="pro-left">
				<dl 
                  <dt><a href="proinfo.html"><img :src="item.imgUrl" width="286" height="188"></a></dt>
					<dd>
						
					</dd>
				</dl>
			</div>
		</div> -->
	</div>
</template>

<script>
	export default {
		data () {
			return {
				
				carBuy:[],
				searchKey:'',
				orderNumber:"",
				orderTypeId:"",
				date:"",
				statu:"",
				clientId:'',
				currentUser:{},
				tableInfo: {
				  page: 1,
				  size: 10,
				  total: 0,
				  pageSize: 0,
				  columnInfo: [
				    // {
				    //   title: '#',
				    //   width: 80,
				    //   fixed: 'left',
				    //   align: 'center',
				    //   render: (h, params) => {
				    //     return h(
				    //       'span',
				    //       params.index +
				    //         (self.tableInfo.page - 1) * self.tableInfo.size +
				    //         1
				    //     )
				    //   },
				    // },
				    {
				      title: '订单编号',
				      key: 'orderNumber',
				      
				    },
				    {
				      title: '订单描述',
				      key: 'description',
				      
				    },
				    {
				      title: '价格',
				      key: 'money',
				      
				    },
				    {
				      title: '交易状态',
				      slot: 'statu',
				      
				    },
				    {
				      title: '交易时间',
				      key: 'date',
				      
				    },
				],
				data: [],
				},
				statuList:[
						  {value:0,label:'未支付'},
						  {value:1,label:'待支付'},
						  {value:2,label:'已支付'},
						  {value:3,label:'取消支付'},

				],
				typeList:[
						  {value:1,label:'卖房发布'},
						  {value:2,label:'租房发布'},
						  {value:3,label:'求租房发布'},
						  {value:4,label:'买房发布'},
						  {value:5,label:'卖车发布'},
						  {value:6,label:'租车发布'},
						  {value:7,label:'买车发布'},
						  {value:8,label:'求租车发布'},
						  {value:9,label:'卖房详情'},
						  {value:10,label:'租房详情'},
						  {value:11,label:'求租房详情'},
						  {value:12,label:'买房详情'},
						  {value:13,label:'卖车详情'},
						  {value:14,label:'租车详情'},
						  {value:15,label:'买车详情'},
						  {value:16,label:'求租车详情'},
				
				]
			}
		},
		methods: {
			changeDate:function(before){
				this.$data.date = before
			},
			pageSearch: function(changedPage) {
			  this.$data.tableInfo.page = changedPage
			  this.search(changedPage)
			},
	        search:function(current){
				console.log(this.$data.statu)
	        		this.http.get({
	        			url:'/pay-order/page',
	        			param:{
							orderNumber:this.$data.orderNumber,
							orderTypeId:this.$data.orderTypeId,
							date:this.$data.date,
							statu:this.$data.statu,
							searchKey:this.$data.searchKey,
							pageSize: this.$data.tableInfo.size,
							currentPage:current,
							clientId:this.$data.clientId,
							}
	        		}).then((data) => {
						this.$data.tableInfo.page = data.current
						this.$data.tableInfo.size = data.size
						this.$data.tableInfo.total = data.total
	        			this.$data.tableInfo.data = data.records
	        			console.log(data)
	        		})
	        	},
	        },
	        created() {
				this.$data.currentUser = JSON.parse(sessionStorage.getItem('CURRENT'))
				this.$data.clientId = this.$data.currentUser.client.clientId
	        	this.search(1)
	        },
			beforeRouteLeave(to, from, next) {
			    this.$destroy();//手动销毁当前页面
			    next();
			},
	}
</script>

<style>
</style>
